<!-- 发布商品 -->
<template>
  <div class="add-goods">
    <van-nav-bar fixed title="发布商品" safe-area-inset-top>
      <template #left>
        <img
          style="width: 30px; margin-right: 10px"
          src="../../assets/images/返回2.png"
          @click="() => $router.go(-1)"
          alt=""
        />
        <img
          style="width: 30px"
          @click="() => $router.push({ path: '/' })"
          src="../../assets/images/返回首页.png"
          alt=""
        />
      </template>
    </van-nav-bar>
    <!-- form -->
    <van-form @submit="onSubmit" label-width="1.6rem">
      <div class="title1">添加商品</div>
      <van-field
        v-model="form.title"
        name="商品标题"
        label="商品标题"
        placeholder="请输入商品标题"
        :rules="[{ required: true, message: '请输入商品标题' }]"
      />
      <van-field
        v-model="form.smalltitle"
        name="小标题"
        label="小标题"
        placeholder="请输入小标题"
        :rules="[{ required: true, message: '请输入小标题' }]"
      />
      <van-field
        readonly
        clickable
        right-icon="arrow"
        name="picker"
        :value="form.type"
        label="商品分类"
        placeholder="请选择商品分类"
        @click="show.typeshow = true"
      />
      <van-popup v-model="show.typeshow" position="bottom">
        <van-picker
          show-toolbar
          :columns="options.typeoptions"
          @confirm="onConfirm"
          @cancel="show.typeshow = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        right-icon="arrow"
        name="picker"
        :value="form.delivery"
        label="配送方式"
        placeholder="请选择配送方式"
        @click="show.deliveryshow = true"
      />
      <van-popup v-model="show.deliveryshow" position="bottom">
        <van-picker
          show-toolbar
          :columns="options.deliveryoptions"
          @confirm="deliveryConfirm"
          @cancel="show.deliveryshow = false"
        />
      </van-popup>
      <!-- 运费模板 -->
      <div class="title2">
        <div>设置运费模板</div>
        <div>价格设置(仅用于显示,排序)</div>
      </div>
      <van-field
        v-model="form.price"
        name="商品价格"
        label="商品价格"
        placeholder="请输入商品价格"
        :rules="[{ required: true, message: '请输入商品价格' }]"
      >
        <template #right-icon>
          <span>元</span>
        </template>
      </van-field>
      <van-field
        v-model="form.price2"
        name="市场价"
        label="市场价"
        placeholder="请输入市场价"
        :rules="[{ required: true, message: '请输入市场价' }]"
      >
        <template #right-icon>
          <span>元</span>
        </template>
      </van-field>
      <van-field
        readonly
        center
        name="允许退款"
        label="允许退款"
        placeholder="开启后用户可以申请退款"
      >
        <template #right-icon>
          <van-switch size=".6rem" v-model="form.refund" />
        </template>
      </van-field>
      <van-field
        readonly
        center
        name="是否包邮"
        label="是否包邮"
        placeholder="请选择是否包邮"
      >
        <template #right-icon>
          <van-switch size=".6rem" v-model="form.freeshopping" />
        </template>
      </van-field>
      <!-- 商品详情 -->
      <div class="title1">商品详情</div>
      <van-field
        v-model="form.details"
        name="商品详情"
        label="商品详情"
        placeholder="请输入商品详情"
        :rules="[{ required: true, message: '请输入商品详情' }]"
      />
      <van-field name="uploader" label="商品封面图" label-width="2rem">
        <template #input>
          <van-uploader v-model="form.file" :max-count="1" />
        </template>
      </van-field>
      <van-field name="uploader" label="商品图片">
        <template #right-icon>
          <span>最多可上传5张图片</span>
        </template>
      </van-field>
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="form.filelist" :max-count="5" />
        </template>
      </van-field>
      <div class="tags">
        <div
          :class="form.tags.includes(i) ? 'li active' : 'li'"
          v-for="i in 10"
          :key="i"
          @click="tagChange(i)"
        >
          48小时发货
        </div>
      </div>
      <div style="height:0.2rem;"></div>
      <div class="btns">
        <van-button round block type="info" native-type="submit"
          >确认</van-button
        >
        <van-button round block type="default" style="margin-top:20px;">返回</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 只读数据
      readonly: "",
      show: {
        typeshow: false,
        deliveryshow: false,
      },
      options: {
        typeoptions: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
        deliveryoptions: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      },
      form: {
        title: "",
        smalltitle: "",
        type: "",
        deliverytype: "",
        price: "",
        price2: "",
        refund: true,
        freeshopping: true,
        details: "",
        file: [],
        filelist: [],
        tags: [],
      },
    };
  },
  methods: {
    // 表单提交
    onSubmit(values) {
      console.log("submit", values);
    },
    // 标签选择
    tagChange(i) {
      if (this.form.tags.includes(i)) {
        for (let k = 0; k < this.form.tags.length; k++) {
          if (this.form.tags[k] === i) {
            this.form.tags.splice(k, 1);
            break;
          }
        }

        console.log("删除了?", this.form.tags);
      } else {
        this.form.tags.push(i);
      }
      console.log("点击玩", this.form.tags);
    },
    // 选择分类
    deliveryConfirm(value) {
      this.form.deliverytype = value;
      this.show.deliveryshow = false;
    },
    // 配送方式
    onConfirm(value) {
      this.form.type = value;
      this.show.typeshow = false;
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.add-goods {
  width: 100%;
  padding-top: 92px;
  .title1,
  .title2 {
    padding: 20px 30px;
    color: rgb(171, 171, 171);
  }
  .btns{
    padding: 50px 100px;
    background-color: #fff;
  } .title2 {
    > :first-child {
      font-size: 28px;
      font-weight: bold;
      color: #3e96e8;
      margin-bottom: 20px;
    }
  }
  .tags {
    width: 100%;
    padding: 30px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    .li {
      width: 23%;
      margin-right: 18px;
      margin-bottom: 20px;
      border-radius: 25px;
      text-align: center;
      line-height: 50px;
      background-color: rgb(230, 243, 255);
      color: rgb(102, 102, 102);
    }
    > :nth-child(4n) {
      margin-right: 0 !important;
    }
  }
  .active {
    color: #3e96e8;
  }
}
</style>